// updateNodeElement.js 更新节点元素，添加属性
export function updateNodeElement (newEle, vdom, oldVdom = {}) {
  const newProps = vdom.props || {}
  const oldProps = oldVdom.props || {}

  // 循环props,真实dom设置属性
  for (let key in newProps) {
    const newPropVal = newProps[key]
    const oldPropVal = oldProps[key]//undefined || any
    if (newPropVal !== oldPropVal) {
      if (key.slice(0, 2) === 'on') {
        // 事件属性
        const evtName = key.slice(2).toLowerCase()
        newEle.addEventListener(evtName, newPropVal)

        // 移除旧事件
        if (oldPropVal) {
          newEle.removeEventListener(evtName, oldPropVal)
        }
      } else if (key === 'value' || key === 'checked') {
        // 输入框、单选框
        newEle[key] = newPropVal
      } else if (key !== 'children') {
        if (key === 'className') {
          newEle.setAttribute('class', newPropVal)
        } else {
          newEle.setAttribute(key, newPropVal)
        }
      }
    }
  }

  // 删除属性
  for (let key in oldProps) {
    if (!newProps[key]) {//新节点属性取不到，说明是被删除的属性
      /* 
      1. 事件属性
      2. children
      */
      if (key.slice(0, 2) === 'on') {
        const evtName = key.slice(2).toLowerCase()
        newEle.removeEventListener(evtName, oldProps[key])
      } else if (key !== 'children') {
        newEle.removeAttribute(key)
      }
    }
  }
}